<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" :model="formState" :rules="rules">
        <div class="option-column">
          <div class="column-title">设备信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="设备名称" name="name">
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入设备名称"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备保修期" name="limt">
                <a-input
                  v-model:value="formState.limt"
                  placeholder="请输入设备保修期"
                  suffix="个月"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备型号" name="no">
                <a-input
                  v-model:value="formState.no"
                  placeholder="请输入设备型号"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="设备状态">
                <a-select
                  v-model:value="formState.status"
                  placeholder="请选择状态"
                >
                  <a-select-option value="china">China</a-select-option>
                  <a-select-option value="usa">U.S.A</a-select-option>
                </a-select>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="最新软件版本" name="version">
                <a-input
                  v-model:value="formState.version"
                  placeholder="请输入最新软件版本"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">设备模型</div>
          <a-upload-dragger
            v-model:fileList="fileList1"
            name="file"
            :multiple="false"
            :max-count="1"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            @change="handleChange1"
            @drop="handleDrop1"
          >
            <p class="ant-upload-drag-icon">
              <CloudUploadOutlined />
            </p>
            <p class="ant-upload-hint">
              将模型拖拽到此，或单击<span class="blue">直接上传</span>
            </p>
          </a-upload-dragger>
        </div>
        <div class="option-column">
          <div class="column-title">预览图片</div>
          <a-upload-dragger
            v-model:fileList="fileList2"
            name="file"
            :multiple="false"
            :max-count="1"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            @change="handleChange2"
            @drop="handleDrop2"
          >
            <p class="ant-upload-drag-icon">
              <CloudUploadOutlined />
            </p>
            <p class="ant-upload-hint">
              将jpg、bmp、png格式的图片拖拽到此，或单击<span class="blue"
                >直接上传</span
              >分辨建议为400*300
            </p>
          </a-upload-dragger>
        </div>
        <div class="option-column">
          <div class="column-title">仪器介绍</div>
          <edit v-model:value="introduction" />
        </div>
        <div class="option-column">
          <div class="column-title">实验内容</div>
          <edit v-model:value="content" />
        </div>
        <div class="option-column">
          <div class="column-title">配置参数</div>
          <div
            class="column-content"
            v-for="(item, index) in configurationList"
          >
            <div class="content-item">
              <a-form-item label="配置名称" name="configurationName">
                <a-input
                  v-model:value="item.configurationName"
                  placeholder="请输入配置名称"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="配置参数" name="configurationParameter">
                <a-input
                  v-model:value="item.configurationParameter"
                  placeholder="请输入配置参数"
                />
              </a-form-item>
              <MinusCircleOutlined
                v-if="configurationList.length > 1"
                class="delete-button"
                @click="deleteDevice(index)"
              />
            </div>
          </div>
          <div class="column-footer">
            <a-button type="dashed" :icon="h(PlusOutlined)" @click="addDevice"
              >添加设备</a-button
            >
          </div>
        </div>
        <!-- <div class="option-column">
          <div class="column-title">报修二维码</div>
          <div class="column-content">
            <p>创建设备后自动生成</p>
          </div>
        </div> -->
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, h, watch } from "vue";
import {
  PlusOutlined,
  MinusCircleOutlined,
  CloudUploadOutlined,
} from "@ant-design/icons-vue";
import edit from "@/components/edit/index.vue";
const formState = ref({
  name: "",
  limt: "",
  no: "",
  status: [],
  version: "",
});
const resetForm = () => {
}
const configurationList = ref([
  {
    configurationName: "",
    configurationParameter: "",
  },
]);
const content = ref("");
const introduction = ref("");

const addDevice = () => {
  configurationList.value.push({
    configurationName: "",
    configurationParameter: "",
  });
};

const deleteDevice = (index) => {
  configurationList.value.splice(index, 1);
};
const fileList1 = ref([]);
const handleChange1 = (info) => {
  const status = info.file.status;
  if (status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
function handleDrop1(e) {
  console.log(e);
}
const fileList2 = ref([]);
const handleChange2 = (info) => {
  const status = info.file.status;
  if (status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
function handleDrop2(e) {
  console.log(e);
}
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入设备名称",
      trigger: "blur",
    },
  ],
  no: [
    {
      required: true,
      message: "请输入设备型号",
      trigger: "blur",
    },
  ],
  limt: [
    {
      required: true,
      message: "请输入设备保修期",
      trigger: "blur",
    },
  ],
});
</script>

